import React from 'react';
import './App.css';
import { IconButton, Stack, TextField, Box, InputAdornment, Paper  } from '@mui/material';
import { Visibility, VisibilityOff } from '@mui/icons-material';
import { styled } from '@mui/material/styles';


function App() {

  const [showPassword, setShowPassword] = React.useState(false);


  const [ loginInfo, setLoginInfo ] = React.useState({name: '', password: ''})

  const handleShowPassword = () => {
    setShowPassword(!showPassword)
  }

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    
  }

  const handleChangeName = (event: React.ChangeEvent<HTMLInputElement>) => {
    loginInfo.name = event.target.value
  }

  const handleChangePassword = (event: React.ChangeEvent<HTMLInputElement>) => {
    loginInfo.password = event.target.value
  }

  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault()
  }

  const handleMouseUpPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault()
  }


  const Item = styled(Paper)(({ theme }) => ({
    backgroundColor: '#fff',
    ...theme.typography.body2,
    padding: theme.spacing(1),
    textAlign: 'center',
    color: theme.palette.text.secondary,
    ...theme.applyStyles('dark', {
      backgroundColor: '#1A2027',
    }),
  }));

  return (
    <div>
      <div className= 'left'></div>
      <div className='right'>
        <Box component="form" sx={{ mt: 3 }}>
          <Stack>
            <Item>
              <TextField id='username' label='用户名' variant='outlined' onChange={ handleChangeName }></TextField>
            </Item>
            <Item>
              <TextField
                id='password'
                label='密码'
                variant='outlined'
                onChange={ handleChangePassword }
                type = {showPassword ? 'text': 'password'}
                ></TextField>
            </Item>

            <Item>
              <div className='login'>登录</div>
            </Item>
          </Stack>
        </Box>
      </div>
    </div>
  );
}

export default App;
